<template>
	<div>
		<van-search placeholder="请输入搜索关键词" @focus="$router.push('/search')" />
		<van-swipe :autoplay="3000" lazy-render class="banner">
			<van-swipe-item>
				<img v-my-lazy="'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
			</van-swipe-item>
			<van-swipe-item>
				<img v-my-lazy="'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'" />
			</van-swipe-item>
		</van-swipe>
		<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="fetchData">

			<ListItem 
				v-for="v in homeList" 
				:key="v.id" :v="v" 
				@click="$router.push('/detail/' + v.id)"
				:is-active="historyList.some(item => item.id === v.id)"
			></ListItem>

		</van-list>
	</div>
</template>


<script lang='ts' setup>
import { useStore } from 'vuex'
import { RootState } from '@/store'
import { onMounted, computed, reactive, ref } from 'vue';
import ListItem from '@/components/ListItem/ListItem.vue'
import logo from '@/assets/logo.png'
const store = useStore<RootState>()
const homeList = computed(() => store.state.homeList)
const historyList = computed(() => store.state.historyList)
const pageConfig = reactive({
	pageCode: 1,
	pageSize: 10
})
const loading = ref(false)
const finished = ref(false)
// 请求数据函数
const fetchData = async () => {
	loading.value = true
	const { code, message } = await store.dispatch('fetchHomeList', pageConfig);
	if (code === 200) {
		pageConfig.pageCode++
		loading.value = false

	} else {
		finished.value = true
	}

}


// onMounted(() => {

// })
</script>


<style scoped lang="scss">
.banner {
	height: 200px;

	img {
		height: 100%;
		width: 100%;
	}
}
</style>

